<template>
	<view class="content">
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index"
				@click="openinfo" :data-newsid="item.post_id">
				<view class="uni-media-list">
					<image class="uni-media-list-logo" :src="item.author_avatar"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{item.title}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis">{{item.create_at}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				news:[]
			}
		},
		onLoad:function() {
			uni.showLoading({
				title:'加载中...'
			})
			uni.request({
				url:'https://unidemo.dcloud.net.cn/api/news',
				method:'GET',
				data:{},
				success:res => {
					this.news=res.data;
					uni.hideLoading();
					
				},
				fail:()=>{},
				complete:()=>{}
			});

		},
		methods: {
			openinfo(e){
				console.log(e);
				var newsid=e.currentTarget.dataset.newsid;
				uni.navigateTo({
					url:'../detail/detail?newsid='+newsid
				});
			}

		}
	}
</script>
<style>
    /* 通用样式 */  
    .content {  
        padding: 10px;  
        background-color: #f8f8f8; /* 浅灰色背景 */  
    }  
      
    .uni-list {  
        display: flex;  
        flex-direction: column; /* 垂直排列 */  
        gap: 10px; /* 列表项之间的间隔 */  
    }  
      
    .uni-list-cell {  
        display: flex;  
        align-items: center; /* 垂直居中对齐 */  
        padding: 10px;  
        background-color: #fff; /* 白色背景 */  
        border-radius: 5px; /* 圆角边框 */  
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 阴影效果 */  
        transition: all 0.3s ease; /* 平滑过渡效果 */  
    }  
      
    .uni-list-cell-hover {  
        background-color: #f0f0f0; /* 鼠标悬停时的背景色 */  
    }  
      
    .uni-media-list {  
        display: flex;  
        align-items: center; /* 垂直居中对齐 */  
    }  
      
    .uni-media-list-logo {  
        width: 50px; /* 头像宽度 */  
        height: 50px; /* 头像高度 */  
        /* border-radius: 50%; */ /* 圆形头像 */  
        margin-right: 10px; /* 头像与文本之间的间隔 */  
    }  
      
    .uni-media-list-body {  
        flex-grow: 1; /* 文本区域占据剩余空间 */  
    }  
      
    .uni-media-list-text-top {  
        font-size: 16px; /* 标题字体大小 */  
        font-weight: bold; /* 标题加粗 */  
        color: #333; /* 标题颜色 */  
    }  
      
    .uni-media-list-text-bottom {  
        font-size: 12px; /* 发布时间字体大小 */  
        color: #666; /* 发布时间颜色 */  
        margin-top: 5px; /* 发布时间与标题之间的间隔 */  
        overflow: hidden; /* 隐藏超出部分 */  
        text-overflow: ellipsis; /* 文本超出时显示省略号 */  
        white-space: nowrap; /* 文本不换行 */  
    }  
      
    /* 响应式调整，可以根据具体需求调整 */  
    @media (max-width: 600px) {  
        .uni-media-list-logo {  
            width: 40px;  
            height: 40px;  
        }  
      
        .uni-media-list-text-top {  
            font-size: 14px;  
        }  
      
        .uni-media-list-text-bottom {  
            font-size: 10px;  
        }  
    }
</style>